<template>
    <div>
        <div class="tabsClass">
            <div class="tabBox">
                <tableIndex
                        ref="tableindex"
                        :tableData="tableData"
                        :tableHead="tableHead"
                        :isIndex="true"
                        :isSelection="true"
                        :isRadio="false"
                        :fields="state.fields"
                        :height="500"
                        :page="page"
                        @selectChange="selectChange"
                        @searchList="searchList"
                        @page-change="pageChange"
                >
                    <template #interestStatus="{ row }">
                        <svg-icon
                                v-if="row.interestStatus == 1"
                                icon-class="heart-active"
                        />
                        <svg-icon v-else icon-class="heart" />
                    </template>
                    <template #btns>
                        <div style="float: right">
                            <el-button
                                    v-if="state.tabId==='3'"
                                    size="small"
                                    plain
                                    class="button_edit"
                                    @click="addExpectedPlan"
                            >新增</el-button
                            >
                            <el-button
                                    size="small"
                                    plain
                                    class="button_edit"
                                    @click="
                                    onExport({
                                      ...getSearchData(),
                                      type: state.tabId,
                                      prepareStatus: 1
                                    })
                                  "
                            ><svg-icon icon-class="export" /> 一键导出</el-button
                            >
                        </div>
                    </template>
                    <template #operate>
                        <el-table-column
                                label="操作"
                                width="300"
                                align="center"
                                fixed="right"
                        >
                            <template #default="{ row }">
                                <el-button
                                        v-if="state.tabId==='1'"
                                        size="small"
                                        class="button_edit"
                                        type="primary"
                                        @click="goPath(row)"
                                >查看</el-button
                                >
                                <el-button
                                    v-if="row.isDark===2"
                                        size="small"
                                        class="button_view"
                                        type="primary"
                                        @click="pushProjectPlan(row)"
                                >项目规划</el-button
                                >
                                <el-button
                                        size="small"
                                        type="primary"
                                        class="button_cancel"
                                        @click="projectKanBan(row)"
                                >项目看板</el-button
                                >
                                <el-button
                                    size="small"
                                    type="primary"
                                    class="button_cancel"
                                    @click="toTaskList(row)"
                                >任务列表</el-button
                                >
                            </template>
                        </el-table-column>
                    </template>
                    <template #btn-add>
                        <div class="itemBtn" @click.prevent="radioChange">
                            <div
                                    class="screen-button d-flex a-center j-center"
                                    :style="{
										'--screen-button-border-color':
                    hiddenInterest ? '#fc7037' : '#CCCCCC',
									}"
                            >
                                <el-radio v-model="hiddenInterest" :label="true">
                                    隐藏未关注的项目
                                </el-radio>
                            </div>
                        </div>
                    </template>
                </tableIndex>
                <preliminaryCom ref="preliminary"></preliminaryCom>
            </div>
        </div>
    </div>
</template>
<script setup>
import TableIndex from '@/components/table/index.vue'
import { ref, reactive, onMounted, onBeforeMount, watch } from 'vue'
import PreliminaryCom from '@/views/constructionProjectManage/project_mt/components/status_change_dialog.vue'
import {ElDialog, ElTabPane, ElTabs, ElForm, ElFormItem, ElMessage, ElMessageBox} from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { projectConfigApi, department, publicProject } from '@/api/project.js'
import { deriveHandelFnc } from '@/hooks/downCommon'
import { projectInfoApi } from '@/api/biddingProject.js'

//路由跳转
let router = useRouter()
let tableindex = ref(null)
let activeName = ref('0')
let preliminary = ref(null)
let data = reactive([])
const tabsList = ref([
    {
        name: '投资类',
        id: '1'
    },
    {
        name: '设计类',
        id: '2'
    },
    {
        name: '开发类',
        id: '3'
    },
    {
        name: '运营类',
        id: '4'
    },
    {
        name: '公共类',
        id: '5'
    }
])

let state = reactive({
    treeDepartmentId: '',
    tabId: '3',
    tabName: 'departmentName',
    loading: true,

    fields: [
        { key: 'projectQuery', label: '项目名称', type: 'input',placeholder:'请输入项目名称' },
        {
            key: 'projectSetId',
            label: '关联项目集',
            type: 'select',
            options: {
                list: []
            }
        },
        {
            key: 'streetCode',
            label: '项目位置',
            type: 'select',
            options: {
                list: []
            }
        },
        {
            key: 'year',
            label: '项目年份',
            type: 'year'
        },
        {
            key: 'departmentId',
            label: '立项部门',
            type: 'select',
            options: {
                list: []
            }
        },
        {
            key: 'status',
            label: '项目状态',
            type: 'select',
            options: {
                list: [
                    {
                        label: '全部',
                        value: ''
                    },
                    {
                        label: '未开工',
                        value: -2
                    },
                    {
                        label: '停工',
                        value: -1
                    },
                    {
                        label: '施工中',
                        value: 1
                    },
                    {
                        label: '竣工',
                        value: 2
                    },
                    {
                        label: '其他',
                        value: 3
                    }
                ]
            }
        },
        {
            key: 'projectTypeId',
            label: '项目分类',
            type: 'select',
            options: {
                list: []
            }
        },
        {
            key: 'isGovernment',
            label: '政府项目',
            type: 'select',
            options: {
                list: [
                    {
                        label: '全部',
                        value: ''
                    },
                    {
                        label: '否',
                        value: 0
                    },
                    {
                        label: '是',
                        value: 1
                    }
                ]
            }
        },
    ]
})
const formInline = reactive({
    user: '',
    region: '',
    date: [],
    radio: 0
})

const page = reactive({
    page: 1,
    pageSize: 50,
    total: 0
})

const getLocations = () => {
    projectInfoApi.getLocations(2, '').then((res) => {
        if (res.code === '200') {
            state.fields[2].options.list = res.data.map((v) => {
                return {
                    label: v.name,
                    value: v.code
                }
            })
        }
    })
}

// --------------
// table相关
//获取部门信息
const getdepartmentList = () => {
    department.getProjectPhase().then((res) => {
        if (res.code == 200) {
            data = res.data
            state.loading = false
        }
        // console.log('----------------', data);
    })
}
// 获取项目子类
const getTypeList = () => {
    projectConfigApi.getTypeList('10' + state.tabId).then((res) => {
        state.fields[6].options.list = []
        if (res.code == 200) {
            res.data.map((v) => {
                state.fields[6].options.list.push({
                    value: v.projectTypeId,
                    label: v.typeName
                })
            })
        }
    })
}

let tableHead = reactive([
    // {
    // 	prop: "interestStatus",
    // 	label: "关注",
    // 	isSvg: ["gz_true", "gz_false"],
    // },
/*    {
        prop: 'interestStatus',
        label: '重点关注',
        slot: 'interestStatus'
    },*/
    {
        prop: 'projectName',
        label: '项目名称',
        width: '120',
        style: {
            color: '#FC7018'
        }
    },
    // {
    //   prop: 'projectId',
    //   label: '项目编号'
    // },
    {
        prop: 'streetName',
        label: '项目位置'
    },
    {
        prop: 'projectTypeName',
        label: '项目分类'
    },
    {
        prop: 'isGovernment',
        label: '政府项目',
        formatter: (row) => {
            if(row.isGovernment!==null){
                return ['否','是'][row.isGovernment]
            }
            return '-';
        },
    },
    {
        prop: 'responsibleDepartmentName',
        label: '项目立项部门',
        minWidth: 120,
    },
    {
        prop: 'projectAmount',
        label: '拟计划总投额',
        minWidth: 120,
    },
    {
        prop: 'realProjectAmount',
        label: '实际总投额',
        formatter: (row) => {
            return row.realProjectAmount ? row.realProjectAmount : '0'
        },
        minWidth: 100,
    },
    {
        prop: 'createTime',
        label: '项目创建时间',
        minWidth: 120,
    },
    {
        // -2未开工-1停工1施工中2竣工3其他
        prop: 'status',
        label: '项目状态',
        formatter: (row) => {
            let str = ''
            switch (row.status) {
                case -2:
                    str = '未开工'
                    break
                case -1:
                    str = '停工'
                    break
                case 1:
                    str = '施工中'
                    break
                case 2:
                    str = '竣工'
                    break
                case 3:
                    str = '其他'
                    break
            }
            return str
        }
    }
])
let tableData = ref([])

//获取搜索组件数据
const getSearchData = () => {
    return tableindex.value.getSearchData()
}
//获取项目类型
const publicProjectData = () => {
    publicProject.getProjectTypeTreeVo().then((res) => {
        if (res.code === '200') {
            data = res.data
            state.loading = false
        }
    })
}
//项目状态变更
const statusChangeHandler = (row) => {
    preliminary.value.state.centerDialogVisible = true
}

//项目编辑
const projectEditHandler = (row) => {
    router.push({
        path: `/constructionProjectManage/project_mt/components/projectInfo/type=${1}&id=${
            row?.projectId || ''
        }`
    })
}
//项目阶段修改
const pushProjectPlan = (row) => {
    router.push({path: `/constructionProjectManage/expectedplan/projectPlan/tabId=${state.tabId}&type=${1}&id=${
            row?.projectId || ''
        }&isDark=${row.isDark}&isGovernment=${row.isGovernment}`});
}
//项目看板
const projectKanBan = (row) => {
    router.push({
        path: `/constructionProjectManage/projectsPectaculars/pectaculars/type=${1}&id=${
            row?.projectId || ''
        }&name=${row?.projectName || ''}&projectType=${state.tabId}&tabId=${state.tabId}&isDark=${row.isDark}&isPresetPlan=1`
    })
}

/**
 * 任务列表
 */
const toTaskList = (row) => {
    router.push({
        path: `/constructionProjectManage/taskList/index/type=${1}&id=${
            row?.projectId || ''
        }&name=${row?.projectName || ''}&projectType=${state.tabId}&tabId=${state.tabId}&isDark=${row.isDark}`
    })
}

//项目查看
const lookHandler = (row) => {
    router.push({
        path: `/constructionProjectManage/project_mt/components/lookProjectInfoAll/type=1&id=${row.projectId}&projectType=${state.tabId}`
    })
}
// 获取项目集
const getpublicProject = () => {
    projectConfigApi.getProjectSets().then((res) => {
        if (res.code === '200') {
            res.data.forEach((item) => {
                state.fields[1].options.list.push({
                    label: item.projectSetName,
                    value: item.projectSetId
                })
            })
        }
    })
}
// 获取部门
const getAllDepartments = () => {
    department.getAllDepartments().then((res) => {
        if (res.code === '200') {
            res.data.forEach((item) => {
                state.fields[4].options.list.push({
                    label: item.departmentName,
                    value: item.departmentId
                })
            })
        }
    })
}
//搜索查询
const searchList = (e) => {
    if (state.treeDepartmentId) {
        e.departmentId = state.treeDepartmentId
    }
    getPage(e)
}
//分页
const pageChange = (e) => {
    page.page = e.page
    page.pageSize = e.limit

    getPage()
}

watch(
    () => state.tabId,
    () => {
        getPage(getSearchData())
    }
)

let hiddenInterest = ref(false);
let radioChange = () => {
    if (hiddenInterest.value) {
        hiddenInterest.value = false;
    } else {
        hiddenInterest.value = true;
    }
    getPage({
        hiddenInterest: hiddenInterest.value
    })
}

const getPage = (e) => {
    let data = {
        pageNum: page.page,
        pageSize: page.pageSize,
        param: {
            ...e,
            prepareStatus: 1,
            type: state.tabId,
            isDark:1,
            ...getSearchData()
        }
    }
    projectConfigApi.getProjectPage(data).then((res) => {
        if (res.code === '200') {
            tableData.value = res.data.content
            page.total = res.data.totalSize
        }
    })
}

const exportConfig = reactive({
    fileName: '正式项目管理',
    apiPath: 'projectExport',
    form: {}
})
const { onExport } = deriveHandelFnc(exportConfig)

const selectProjectList = ref([]);
const selectChange = (e) => {
    selectProjectList.value = e;
}

/**
 * 查看
 */
const goPath = (row) => {
    router.push({path:`/constructionProjectManage/invest/details/${row.projectId}/${row.projectTypeId}/1`});
}

/**
 * 一键转暗
 */
const changeDark = () => {
    if(selectProjectList.value.length===0){
        return ElMessage.warning('请选择需要转暗的数据!');
    }
    ElMessageBox.confirm(
        '确认一键转暗吗?',
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        }
    )
        .then((action)=>{
            if(action==='confirm'){
                let projectIds = selectProjectList.value.map((item)=>{return item.projectId});
                projectConfigApi.createDarkProject({projectIds:projectIds}).then(res=>{
                    if(res.code==='200'){
                        ElMessage.success('操作成功!');
                        getPage()
                    }else{
                        ElMessage.error('操作失败!');
                    }
                });
            }
        });
}

/**
 * 新增预计计划
 */
const addExpectedPlan = () => {
    router.push(
        `/constructionProjectManage/preliminaryProject/components/preliminaryInfo3/type=0&projectId=${""}&projectType=${
            state.tabId
        }`
    );
}

onBeforeMount(() => {
    getdepartmentList()
})
onMounted(() => {
    getPage()
    getpublicProject()
    getAllDepartments()
    getTypeList()
    getLocations()
})
</script>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/button.scss';
.tabsClass {
  display: flex;
  .treesty {
    width: 13%;

    margin-right: 10px;
    .demo-tabs {
      width: 100%;
    }
    .el-tree {
      overflow-y: scroll;
      height: 500px;
    }
  }
  .tabBox {
    width: 100%;
  }
}
.tabsBox {
  margin-bottom: 30px;
  .tabsItem {
    padding: 0 30px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin-right: 20px;
    color: #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
  .tabsItemHover {
    border: 1px solid #fc702b;
    color: #fc702b;
    background: #fff8f6;
  }
}
:deep(.el-date-editor--year) {
  height: 40px;
  .el-input__wrapper {
    height: 40px;
  }
}
@import '@/assets/general_style/dialog.scss';
</style>
